<template>
  <div class="body">
    <div id="clock">
      <p class="date">{{ date }}</p>
      <p class="time">{{ time }}</p>
      <p class="name">掌握好每一滴时间</p>
    </div>
  </div>


</template>

<script>
export default {
  name: "ManPageWelcomClock",
  data(){
    return{
      time: '',
      date: '',
      it :''
    }
  },
  methods:{
    updateTime(){
      var cd = new Date();
      const week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
      this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth()+1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
    },
    zeroPadding(num, digit) {
      var zero = '';
      for(var i = 0; i < digit; i++) {
        zero += '0';
      }
      return (zero + num).slice(-digit);
    }
  },
  mounted() {
    this.it = window.setInterval(()=>{
      this.updateTime();
    },1000)
  },
  destroyed() {
    window.clearInterval(this.it)
  }
}
</script>

<style scoped>

.body {
  height: 100%;
  width: 200px;
  border-radius: 5px;
  display: flex;
  /*background: black;*/
  /*background-image: linear-gradient(180deg, #ebf3f3, #f1f6f6, #f5f1f1);*/
  background-image: url("../assets/825ac39f8e4da22a0af2a0366ce7a84a.jpeg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

p {
  margin: 0;
  padding: 0;
}

#clock {
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 30%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #05eeee;
  text-shadow: 0 0 20px #d6e535, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
  letter-spacing: 0.05em;
  font-size: 80px;
  padding: 5px 0;
}
#clock .date {
  letter-spacing: 0.1em;
  font-size: 24px;
}
#clock .name {
  letter-spacing: 0.1em;
  font-size: 12px;
  padding: 20px 0 0;
}
</style>
